<template>
  <div class="pagination">
    <div class="block">
      <span class="demonstration">共{{total}}条</span>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        current-page.sync="1"
        :page-size="15"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
   props:{
     total: {
       type: Number,
       default: 0
     }
   },
   methods: {
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.$emit('submit', val)
      }
    },
    data() {
      return {
      }
    }
}
</script>
<style lang="scss" scoped>
.pagination{
  // position: absolute;
  // bottom: 0;
  // left: 50%;
  // transform: translateX(-50%);
  // z-index: 999;
  background: #fff;
}
.el-pagination /deep/ .active{
  background: gray !important;
}
.el-pagination /deep/ .el-pagination__total{
  display: none;
}
.block{
  display: flex;
  justify-content: center;
  span{
    line-height: 32px;
  }
  
}
</style>